<template>
  <div class="toolbar-item-container">
    <div class="toolbar-item-container-icon" @click="handleOpen">
      <img class="common-icon" src="@/assets/emoji.svg" />
    </div>
    <div
      v-if="visible"
      ref="refEmojiDialog"
      class="toolbar-item-container-dialog"
      v-click-outside="handleClose"
    >
      <!-- <EmojiPicker
        :native="false"
        :disable-sticky-group-names="false"
        :disable-skin-tones="true"
        :hide-search="true"
        :hide-group-icons="true"
        :hide-group-names="false"
        :display-recent="true"
        :disabled-groups="disabledGroups"
        :group-names="groupNames"
        mode="prepend"
        :offset="640"
        :static-texts="{ placeholder: '搜索表情' }"
        @select="onSelectEmoji"
      /> -->
      <Picker
        :data="emojiIndex"
        :emoji="'smile'"
        :per-line="8"
        :emoji-size="20"
        set="apple"
        :showPreview="false"
        :showSearch="false"
        :showCategories="false"
        :showSkinTones="false"
        :i18n="emojiI18n"
        style="max-height: 320px"
        @select="onSelectEmoji"
      />
    </div>
  </div>
</template>

<script setup>
// import EmojiPicker from 'vue3-emoji-picker'
// import 'vue3-emoji-picker/css'

import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
import data from 'emoji-mart-vue-fast/data/all.json'
import 'emoji-mart-vue-fast/css/emoji-mart.css'

const emit = defineEmits(['select'])
const visible = ref(false)
const refEmojiDialog = ref(null)
// const disabledGroups = ref([
//   'animals_nature',
//   'food_drink',
//   'activities',
//   'travel_places',
//   'objects',
//   'symbols',
//   'flags'
// ])
// const groupNames = ref({
//   recent: '最近使用',
//   smileys_people: '微笑与人物',
//   animals_nature: '动物与自然',
//   food_drink: '食物与饮料',
//   activities: '活动',
//   travel_places: '旅行与地点',
//   objects: '物体',
//   symbols: '符号',
//   flags: '旗帜'
// })

// 定义i18n
const emojiI18n = {
  // search: '搜索',
  // notfound: 'No Emoji Found',
  categories: {
    // search: '搜索结果',
    // recent: '经常使用',
    smileys: '所有表情'
    // smileys: '表情与情感',
    // people: '人物与身体',
    // nature: '动物与自然',
    // foods: '食物与饮料',
    // activity: '活动',
    // places: '旅行与地理',
    // objects: '物品',
    // symbols: '符号标志',
    // flags: '旗帜',
    // custom: 'Custom',
    // joy: '哭笑'
  }
}
// 过滤部分表情数量
const emojiData = g_.cloneDeep(data)
emojiData.categories = emojiData.categories.filter((item, i) => {
  item.emojis = item.emojis.slice(0, 103)
  return !i
})
const limitedEmojis = ['smileys']
const emojiIndex = new EmojiIndex(emojiData, {
  // emojisToShowFilter,
  include: limitedEmojis
  // recentLength: 11,
  // exclude,
  // custom
})

// 自定义指令函数
const vClickOutside = {
  mounted(el, binding) {
    el.clickOutsideEvent = event => {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value(event) // 调用传入的回调函数
      }
    }
    setTimeout(() => {
      document.addEventListener('click', el.clickOutsideEvent)
    })
  },
  unmounted(el) {
    document.removeEventListener('click', el.clickOutsideEvent)
  }
}

onMounted(() => {})
const handleOpen = _ => {
  visible.value = true
}

const handleClose = _ => {
  visible.value = false
}

const onSelectEmoji = emoji => {
  console.log('onSelectEmoji', emoji)
  handleClose()
  emit('select', emoji)
}
</script>

<style lang="scss" scoped>
.toolbar-item-container-dialog {
  z-index: 5;
  position: absolute;
  bottom: 35px;
  width: fit-content;
  height: fit-content;
  background: #fff;
  box-shadow: 0 2px 4px -3px #204d8d08, 0 6px 10px 1px #204d8d0f,
    0 3px 14px 2px #204d8d0d;
  :deep(.v3-footer) {
    display: none;
  }
}
</style>
